<template>
	<block>
		<u-navbar :title="title" :autoBack="autoBack" :placeholder="true" :bgColor="bgColor" :fixed="fixed" height="50px"
			:border="border" :titleStyle="titleStyle" @rightClick="$emit('rightClick')">
			<view class="u-nav-slot" slot="left" v-if="onpageshow">
				<!-- <u-icon name="home" color="#fff" size="20"></u-icon> -->
			</view>
			<view class="u-nav-slot" slot="right" v-if="onpageshow">
				<u-icon name="bell" color="#fff" size="20" :class="{ 'flash': hasNewMessage }"
					@click="readUserMessage"></u-icon>
				<view style="color: #fff; margin-left: 5px; " @click="$emit('handleAdd')">新增</view>
			</view>
			<view class="u-nav-slot" slot="right" v-else-if="onListshow">
				<u-icon name="search" size="20" @click="!showCheckboxes && $emit('searchList')"></u-icon>
				<u-icon name="list" size="20" @click="$emit('operate')"></u-icon>
			</view>
		</u-navbar>
	</block>
</template>

<script>
import props from './props.js';
import { getUserMessage, readUserMessage } from '@/api/api'
/**
 * Navbar 自定义导航栏
 * @property {Boolean}			h5Show				是否在h5模式下显示 （默认 false ）
 * @property {Boolean}			hideBtn				是否隐藏返回按钮 （默认 false ）
 */
export default {
	mixins: [props],
	props: {
		h5Show: Boolean,
		hideBtn: Boolean,
		back: Boolean,
		home: Boolean,
		fixed: Boolean,
		border: Boolean,
		onpageshow: {
			type: Boolean,
			default: false
		},
		onListshow: {
			type: Boolean,
			default: false
		},
		showCheckboxes: {
			type: Boolean,
			default: false
		},

	},
	data() {
		return {
			systemInfo: this.$store.getters.getSystemInfo,
			statusBarHeight: uni.$u.addUnit(uni.$u.getPx(this.height) + uni.$u.sys().statusBarHeight, 'px'),
			contentHeight: uni.$u.addUnit(this.height),
			hasNewMessage: false
		}
	},

	created() {
		// console.log("propsprops", onpageshow)
		// this.triggerBellFlash()
	},

	methods: {

		// // 控制bell闪烁
		// triggerBellFlash() {
		// 	getUserMessage().then(res => {
		// 		if (res.code == 200) {
		// 			if (res.count != null) {
		// 				this.hasNewMessage = true;
		// 			}
		// 		}
		// 	})
		// },
		readUserMessage() {
			if (!this.hasNewMessage) {
				return false
			}
			readUserMessage().then(res => {
				if (res.code == 200) {
					this.hasNewMessage = false;
					uni.navigateTo({ url: '/pages/crm/customer' })
				}
			})
		}

	}
}
</script>

<style lang="scss" scoped>
.u-nav-slot {
	display: flex;
	align-items: center;
	gap: 10px; // 可根据需要调整间距
}

.u-navbar {



	&--fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 11;
	}

	&__content {
		@include flex(row);
		align-items: center;
		height: 44px;
		background-color: #9acafc;
		position: relative;
		justify-content: center;

		&__left,
		&__right {
			padding: 0 13px;
			position: absolute;
			top: 0;
			bottom: 0;
			@include flex(row);
			align-items: center;
		}

		&__left {
			left: 0;

			&--hover {
				opacity: 0.7;
			}

			&__text {
				font-size: 15px;
				margin-left: 3px;
			}
		}

		&__title {
			text-align: center;
			font-size: 16px;
			color: $u-main-color;
		}

		&__right {
			right: 0;

			&__text {
				font-size: 15px;
				margin-left: 3px;
			}
		}
	}
}

@keyframes flash {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.flash {
	animation: flash 1s infinite;
}
</style>
